<!DOCTYPE HTML>
<html class="transparent">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>统战成员学习平台</title>
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/study/video_mask_frame.css" />
    <link href="../../css/video-js.css" rel="stylesheet" />
</head>

<body class="transparent">
    <div id="app" style="display:none" v-show="apiready" class="video_mask" @click="show()">
        <header style="z-index: 9999999999;">
            <div v-if="(!isFullScreen&&!startPlay) || showbar">
                <span tapmode @click="back()" class="left"><i class="icon_back_white"></i></span>
            </div>
        </header>
        <img v-if="!startPlay || showbar" src="../../image/video_top.png" alt="" style="width:100%;position:absolute;top:0;left:0;z-index:100;">
        <img v-if="!startPlay || showbar" src="../../image/video_bottom.png" alt="" style="width:100%;position:absolute;bottom:0;left:0;z-index:100;">

        <div v-if="pause" class="play_bg" style="z-index: 999999;">
            <div @click.slef.stop="startOrPause()" class="play_btn"></div>
        </div>
        <div v-show="startPlay" class="loading_bg">
            <div style="height: 100%;width: 100%;position: absolute;top: 0;z-index: 999;"></div>
            <video  id="videoContainer" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%;height: 100%" />
        </div>
        <div v-if="!startPlay" class="play_bg"
            :style="'background: url('+imageBasePath + courseImg+') no-repeat center'">
            <div @click.slef.stop="play()" class="play_btn"></div>
        </div>

        <transition name="up">
            <div v-if="startPlay && showbar" class="bar" style="z-index: 99999999;">
                <span @click.self.stop="startOrPause()" class="play_s_btn">
                    <i @click.self.stop="startOrPause()" v-if="playing" class="icon_pause"></i>
                    <i @click.self.stop="startOrPause()" v-if="!playing" class="icon_play_s"></i>
                </span>
                <div @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend()"
                    class="video_progress">
                    <div class="bg"></div>
                    <div class="pro_bar" :style="'width:' + (now_duration/duration)*100 + '%'"></div>
                </div>
                <span class="time">{{now_duration | secondToTime}}/{{duration | secondToTime}}</span>
                <span @click.self.stop="fullScreen()" class="full_btn">
                    <i @click.self.stop="fullScreen()" v-if="!isFullScreen" class="icon_full_screen"></i>
                    <i @click.self.stop="fullScreen()" v-if="isFullScreen" class="icon_cancel_full_screen"></i>
                </span>
            </div>
        </transition>
    </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
    <script src="../../script/video.min.js"></script>

    <script type="text/javascript">
        var flag;
        var myPlayer;
        var app = new Vue({
            el: '#app',
            data: {
                duration: 0,
                old_percent: 0,
                now_duration: 0,
                apiready: false,
                showbar: false,
                startPlay: false,
                pause: false,
                playing: false,
                loading: true,
                sliding: false,
                isFullScreen: false,
                imageBasePath: imageBasePath,
                courseImg: '',
                flag: null,
                study: false,
                watchFinished: false,
                coursewareFilePath: '',
                courseId: '',
                coursewareId: '',
                coursewareType: '',
                nowAudioDuration: 0,
                historyDuration: 0,
                setTimeFlag: false
            },
            mounted: function () {
                var $this = this;
                apiready = function () {
                    $this.apiready = true;
                    api.parseTapmode();
                    $this.courseImg = api.pageParam.courseImg;
                    $this.study = api.pageParam.study;
                    $this.watchFinished = api.pageParam.watchFinished === 'true';
                    $this.coursewareFilePath = api.pageParam.coursewareFilePath;
                    $this.courseId = api.pageParam.courseId;
                    $this.coursewareType = api.pageParam.coursewareType;
                    $this.coursewareId = api.pageParam.coursewareId;

                    if (api.pageParam.current) {
                        $this.now_duration = api.pageParam.current;
                        $this.historyDuration = api.pageParam.current;
                    }
                    if (api.pageParam.allAuration) {
                        $this.duration = api.pageParam.allAuration;
                    }

                    $this.initVideoContainer();

                    // fix header
                    $this.fixStatusBar();
                    api.addEventListener({
                        name: 'start_play_event'
                    }, function (ret, err) {
                        $this.playing = true;
                        myPlayer.play();

                        flag = setTimeout(function () {
                            $this.showbar = false
                        }, 3000)
                    });

                    api.addEventListener({
                        name: 'pause_video_evnet'
                    }, function (ret, err) {
                        $this.playing = false;
                        $this.pause = true;
                        myPlayer.pause();
                        if ($this.historyDuration) {
                            $this.setLearnedHistory($this.historyDuration * 1000);
                        }
                    });

                    api.addEventListener({
                        name: 'start_video_evnet'
                    }, function (ret, err) {
                        $this.pause = false;
                        $this.playing = true;
                        myPlayer.play();
                    });

                    api.addEventListener({
                        name: 'fullScreen_video_evnet'
                    }, function (ret, err) {
                        myPlayer.ready(function() {
                            myPlayer.requestFullscreen();
                        });
                    });
                    api.addEventListener({
                        name: 'cancelFullScreen_video_evnet'
                    }, function (ret, err) {
                        myPlayer.ready(function() {
                            myPlayer.exitFullScreen();
                        });

                    });

                    var lastTime = 0, count = 0;
                    var loadingFlag = setInterval(function () {
                        if (count % 4 === 0) {
                            lastTime = $this.now_duration;
                        } else {
                            if (lastTime === $this.now_duration) {
                                $this.loading = true
                            } else {
                                $this.loading = false
                            }
                        }
                        if (!$this.pause) {
                            count++;
                        }
                    }, 250);
                    // add playing event
                    api.addEventListener({
                        name: 'playing_video_event'
                    }, function (ret, err) {
                        api.sendEvent({name: 'start_play_event'});

                        if (ret.value.eventType === 'complete') {
                            $this.pause = true;
                            $this.playing = false;
                            clearInterval(loadingFlag);
                            $this.loading = false;
                            $this.study = false;
                            $this.watchFinished = true;
                            if ($this.isFullScreen) {
                                $this.fullScreen()
                            }
                            return;
                        }
                        $this.pause = $this.sliding ? false : (ret.value.eventType === 'pause');

                        api.setFrameAttr({
                            name: 'video_mask_frame',
                            bounces: false
                        });
                    });
                    api.addEventListener({
                        name: 'canceled_FullScreen_event'
                    }, function (ret, err) {
                        $this.isFullScreen = false;
                        $this.fixStatusBar();
                    });
                    api.addEventListener({
                        name: 'comment_pause_video_evnet'
                    }, function (ret, err) {
                        $this.playing = true;
                        $this.startOrPause();
                    });
                    api.addEventListener({
                        name: 'comment_start_video_evnet'
                    }, function (ret, err) {
                        $this.playing = false;
                        $this.startOrPause();
                    });
                    //禁卡左右滑
                    api.addEventListener({
                        name: 'swipeleft'
                    }, function (ret, err) {
                        //不做任何操作,起到禁止左滑效果。
                    });
                    api.addEventListener({
                        name: 'swiperight'
                    }, function (ret, err) {
                        //不做任何操作,起到禁止右滑
                        //ios下右滑为后退，所以特殊处理一下。
                        if ('ios' === api.systemType)
                            $this.back();
                    });

                }
            },
            methods: {
                initVideoContainer: function () {
                    var $this = this;
                    if (!$this.coursewareFilePath) {
                        alert('coursewareFilePath: ' + $this.coursewareFilePath);
                        return;
                    }

                    myPlayer = videojs('videoContainer', {
                        // bigPlayButton: true,
                        language: 'zh-CN',
                        autoplay: false,
                        preload: 'auto',
                        poster: $this.imageBasePath + $this.courseImg,
                        controls: true,
                        webkitPlaysinline: true,
                        playsinline: true,
                        controlBar : false,
                        sources: [{
                            src: videoBasePath + $this.coursewareFilePath,
                            poster: $this.imageBasePath + $this.courseImg,
                            type: 'video/mp4',
                        }]
                    }, function () {

                        var userAgent_m = navigator.userAgent;

                        if (userAgent_m.indexOf("iPhone") > -1 || userAgent_m.indexOf("iOS") > -1) {
                            this.on('loadedmetadata', function () {
                                if ($this.historyDuration) {
                                    myPlayer.currentTime($this.historyDuration);
                                }
                            });
                        } else {
                            // 安卓
                            this.on("timeupdate", function () {
                                if (!$this.setTimeFlag) {
                                    if ($this.historyDuration) {
                                        myPlayer.currentTime($this.historyDuration);
                                    }
                                    $this.setTimeFlag = true;
                                }
                            });
                        }

                        //播放时长(秒)
                        var totalTime = 0;
                        // 监听播放进度
                        myPlayer.on('timeupdate', function () {
                            //当前播放时长(秒)
                            var currentTime = Math.floor(myPlayer.currentTime());

                            if (!$this.watchFinished && currentTime - $this.historyDuration > 1) {
                                myPlayer.currentTime($this.historyDuration);
                                api.sendEvent({name: 'study-video-message', extra: {msg: '还未学完此课程，无法拖动进度！'}});
                                return;
                            }
                            if (currentTime > 0 && currentTime > totalTime && (currentTime % 5 === 0)) {
                                //每隔5秒，向服务器提交播放时间(秒)
                                $this.setLearnedHistory(currentTime * 1000);
                            }
                            totalTime = currentTime;

                            $this.historyDuration = currentTime;
                            $this.now_duration = currentTime;
                            $this.nowVedioDuration = currentTime;

                            api.sendEvent({
                                name: 'update-nowVideoDuration',
                                extra: {
                                    duration: $this.now_duration
                                }
                            });

                        });

                        myPlayer.on('ended', function() {//播放结束
                            $this.playing = false;
                            $this.setFinished();
                        });



                    });
                },
                fixStatusBar: function () {
                    setTimeout(function () {
                        var header = $api.dom('header');;
                        $api.fixStatusBar(header);
                    }, 0)
                },
                play: function () {
                    var $this = this;
                    if (!$this.apiready) return;
                    if ($this.startPlay) return;
                    // if($api.getStorage(_.WIFIONLY) === 'true' && (api.connectionType !== 'wifi')) {
                    //     return msgUtil.toast({
                    //         msg: '请连接到WiFi后学习'
                    //     });
                    // }
                    $this.startPlay = true;
                    $this.showbar = true;
                    $this.playing = true;
                    api.sendEvent({
                        name: 'play_video_evnet'
                    });
                    api.setFrameAttr({
                        name: 'video_mask_frame',
                        bounces: false
                    });
                },
                startOrPause: function () {
                    var $this = this;
                    api.sendEvent({
                        name: $this.playing ? 'pause_video_evnet' : 'start_video_evnet'
                    });
                    $this.playing = !$this.playing;
                    api.setFrameAttr({
                        name: 'video_mask_frame',
                        bounces: false
                    });
                },
                fullScreen: function () {
                    var $this = this;
                    api.sendEvent({
                        name: $this.isFullScreen ? 'cancelFullScreen_video_evnet' : 'fullScreen_video_evnet'
                    });
                    $this.isFullScreen = !$this.isFullScreen;
                    if (!$this.isFullScreen) {
                        $this.fixStatusBar();
                    }
                },
                show: function () {
                    var $this = this;
                    $this.showbar = !$this.showbar;
                    if ($this.showbar) {
                        flag = setTimeout(function () {
                            $this.showbar = false
                        }, 3000)
                    } else {
                        clearTimeout(flag)
                    }
                    api.setFrameAttr({
                        name: 'video_mask_frame',
                        bounces: false
                    });
                },
                back: function () {
                    var $this = this;
                    api.sendEvent({
                        name: 'reloadPlanList'
                    });
                    $this.setLearnedHistory($this.historyDuration * 1000);
                    this.isFullScreen ? this.fullScreen() : api.closeWin();
                },
                touchstart: function ($event) {
                    var $this = this;
                    if (!$this.apiready) return;
                    if (!$this.watchFinished) return;
                    // if($this.study && !$this.watchFinished) return;
                    if ($this.study && !$this.watchFinished) {
                        var percent = ($event.touches[0].clientX - $event.target.getBoundingClientRect().left) / $event.target.offsetWidth;
                        var p = $this.now_duration / $this.duration;
                        $this.old_percent = p > $this.old_percent ? p : $this.old_percent;
                        if (percent > $this.old_percent) return;
                    }
                    $this.sliding = true;
                    api.sendEvent({
                        name: 'pause_video_evnet'
                    });
                    clearTimeout(flag);
                },
                touchmove: function ($event) {
                    var $this = this;
                    if (!$this.apiready) return;
                    if (!$this.watchFinished) return;
                    // if($this.study && !$this.watchFinished) return;
                    var percent = ($event.touches[0].clientX - $event.target.getBoundingClientRect().left) / $event.target.offsetWidth;
                    if ($this.study && !$this.watchFinished) {
                        if (percent > $this.old_percent) {
                            return;
                        }
                    }
                    $this.sliding = true;
                    clearTimeout(flag);
                    if (percent >= 0 && percent <= (($this.study && !$this.watchFinished) ? $this.old_percent : 1)) {
                        $this.now_duration = $this.duration * percent;
                    }
                },
                touchend: function () {
                    var $this = this;
                    if (!$this.apiready) return;
                    if (!$this.watchFinished) return;
                    // if($this.study && !$this.watchFinished) return;
                    if (!$this.sliding) return;
                    $this.sliding = false;

                    console.log('+++++++++++')
                    myPlayer.currentTime($this.now_duration);

                    api.sendEvent({
                        name: 'start_video_evnet'
                    });
                    clearTimeout(flag);
                    flag = setTimeout(function () {
                        $this.showbar = false
                    }, 10000)
                },
                setLearnedHistory: function (progress) {
                    var $this = this;
                    if ($this.watchFinished) return;
                    post('/client/course/setLearnedHistory', {
                        "courseId": $this.courseId,
                        "coursewareId": $this.coursewareId,
                        "progress": progress
                    }, function (ret) {

                    })
                },
                setFinished: function () {
                    var $this = this;
                    if ($this.watchFinished) return;
                    // if ($this.isSetFinished) return;
                    // $this.isSetFinished = true;
                    $this.watchFinished = true;
                    post('/client/course/setFinished', {
                        "courseId": $this.courseId,
                        "coursewareId": $this.coursewareId,
                        "coursewareType": $this.coursewareType
                    }, function (ret) {
                    })
                }
            }
        })
    </script>
</body>

</html>
